<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>使用flash方案异步上传文件</title>
<link rel="stylesheet" type="text/css" href="http://docs.kissyui.com/kissy-dpl/base/build/css/dpl-pkg.css"/>
<link rel="stylesheet" type="text/css" href="../../assets/demo.css"/>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js" charset="utf-8"></script>
</head>
<body>
<article id="doc">
    <h4>使用flash方案异步上传文件</h4>
    <p>基于龙藏写的ajbridge中的uploader，API上做了一层适配处理。</p>
    <p>flash上传的好处在于：</p>
    <ol>
        <li>优秀的兼容性，只是要是能够使用flash的浏览器器，体验上保持一致；</li>
        <li>支持多选上传；</li>
        <li>支持上传进度处理；</li>
        <li>支持文件提前过滤；</li>
    </ol>
    <p>缺点是：你需要额外载入一个uploader.swf，同时会给没有flash的浏览器造成障碍。</p>
    <h5>先来看下面的demo</h5>
    <!-- 上传按钮，组件配置请写在data-config内 -->
    <a id="J_UploaderBtn" class="uploader-button" href="#"> 选择要上传的文件 </a>
    <!-- 文件上传队列 -->
    <ul id="J_UploaderQueue">

    </ul>
    <div class="btn-wrapper">
        <input value="1" type="checkbox" class="J_Field" id="J_AutoUpload" checked> <label>自动上传</label>
        <input value="1" type="checkbox" class="J_Field" id="J_Multiple" checked> <label>多选上传</label>
        <input value="1" type="checkbox" class="J_Field" id="J_UploadDisabled"> <label>禁用上传按钮</label>
        <input value="1" type="checkbox" class="J_Field" id="J_FileFilters"> <label>只允许上传图片</label>
    </div>
    <h5>组件配置情况</h5>
    <pre class='brush: xml; highlight: [1,2]'>
        <a id="J_UploaderBtn" class="uploader-button" href="#"> 上传图片 </a>
        <!-- 文件上传队列 -->
        <ul id="J_UploaderQueue">

        </ul>
     </pre>
    <p>设置<b>type:flash</b>，即可开启flash上传。</p>
    <p>留意flash上传的服务器路径必须是绝对路径，因为如果使用相对路径，组件会以uploader.swf所在位置作为起点。而不是以当前html页面所在位置为起点。</p>
    <h5>采用flash方案时按钮是SwfButton类的实例。</h5>
    <p>SwfButton有个render事件比较重要，因为swf的创建和加载需要额外的时间，如果你想对flash上传组件进行操作，必须等待swf文件等待就绪。</p>
    <p>先获取SwfButton的实例：</p>
    <pre class='brush: js; highlight: [10]'>
        //加载上传组件入口文件
        KISSY.use('gallery/form/1.3/uploader/index', function (S, RenderUploader) {
            var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue',{
                type : "flash",
                swfSize:{"width":200,"height":200},
                serverConfig:{"action":"http://localhost/gallery/gallery/form/1.3/demo/form/uploader/upload.php","data":{"dir":"files/"},"dataType" : "json"},
                name:"Filedata",
                urlsInputName:"fileUrls"
            });
            ru.on('init', function (ev) {
                var $ = S.Node.all,
                    Event = S.Event,
                    //上传组件实例
                    uploader = ev.uploader,
                    //上传按钮实例
                    button = uploader.get('button');
            })
        })
     </pre>
    <p>监听render事件：</p>
    <pre class='brush: js; highlight: [2]'>
        //flash准备完毕需要一定的时间，所以想对flash进行操作最好监听render事件
        button.on('render',function(){
            //触发多选框的change事件，改变组件配置
            Event.fire('.J_Field','change');
        });
     </pre>
    <h5>SwfButton重要属性演示</h5>
    <p><b>disabled</b>：是否禁用上传按钮</p>
    <pre class='brush: js;'>
        button.set('disabled', false);
     </pre>
    <p><b>multiple</b>：是否允许多选上传</p>
    <pre class='brush: js;'>
        button.set('multiple', true);
     </pre>
    <p><b>fileFilters</b>：过滤文件</p>
    <pre class='brush: js;'>
        button.set('fileFilters', [{desc:"JPG,JPEG,PNG,GIF,BMP",ext:"*.jpg;*.jpeg;*.png;*.gif;*.bmp"}]);
     </pre>
    这个属性特别说明下，其值必须是数组，每个数组子项都是一个object：{desc:"",ext:""}，desc和ext必不可少。
</article>
<script>
    var S = KISSY,
        //包路径，实际使用请直接配置为"http://a.tbcdn.cn/s/kissy/"
            path = S.Config.debug && "../../../../../../" || "http://a.tbcdn.cn/s/kissy/";
    S.config({
        packages:[ {
            name:"gallery",
            path:path,
            charset:"utf-8"
        } ]
    });
    //加载上传组件入口文件
    KISSY.use('gallery/form/1.3/uploader/index', function (S, RenderUploader) {
        var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue',{
            type : "flash",
            swfSize:{"width":200,"height":25},
            serverConfig:{"action":"http://localhost/gallery/gallery/form/1.3/demo/form/uploader/upload.php","data":{"dir":"files/"},"dataType" : "json"},
            name:"Filedata",
            urlsInputName:"fileUrls"
        });
        ru.on('init', function (ev) {
            var $ = S.Node.all,
                    Event = S.Event,
                //上传组件实例
                    uploader = ev.uploader,
                //上传按钮实例
                    button = uploader.get('button');

            //flash准备完毕需要一定的时间，所以想对flash进行操作最好监听render事件
            button.on('render', function () {
                //触发多选框的change事件，改变组件配置
                Event.fire('.J_Field', 'change');
            });

            $('#J_AutoUpload').on('change', function (ev) {
                var checked = $(ev.target).prop('checked');
                uploader.set('autoUpload', checked);
            });
            $('#J_UploadDisabled').on('change', function (ev) {
                var checked = $(ev.target).prop('checked');
                button.set('disabled', checked);
            });
            $('#J_Multiple').on('change', function (ev) {
                var checked = $(ev.target).prop('checked');
                button.set('multiple', checked);
            });
            $('#J_FileFilters').on('change', function (ev) {
                var checked = $(ev.target).prop('checked');
                if (checked) {
                    button.set('fileFilters', [
                        {desc:"JPG,JPEG,PNG,GIF,BMP", ext:"*.jpg;*.jpeg;*.png;*.gif;*.bmp"}
                    ]);
                } else {
                    button.set('fileFilters', []);
                }
            });
        });
    })
</script>

<!-- 代码高亮 START  -->
<link href='../../assets/syntaxhighlighter_3.0.83/sh.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="../../assets/syntaxhighlighter_3.0.83/sh.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!-- 代码高亮 END  -->
</body>
</html>
